<template>
  <div class="header-container">
    <div
      class="header-left"
      :style="{
        width: isCollapse ? '64px' : sidebar_width,
      }"
    >
      <div class="logo" v-if="isCollapse">
        <div class="logo-url" />
      </div>
      <div class="title" v-else>
        <div class="title-text">
          <span class="title-text-span">XHZQ</span>
          <span class="title-text-span">后台管理系统</span>
        </div>
      </div>
    </div>
    <div class="header-right">
      <div class="menu-collapse" :title="$t('折叠菜单')">
        <svg-icon
          class="svg-icon intro-box"
          data-step="1"
          data-intro="折叠菜单"
          :style="{
            transform: isCollapse ? 'rotate(180deg)' : 'rotate(0deg)',
          }"
          @click="onCollapse"
          icon="icon-menu"
        />
      </div>
      <div class="active-operation">
        <svg-icon
          :title="$t('搜索')"
          class="svg-active intro-box"
          data-step="2"
          data-intro="页面搜索"
          icon="icon-search"
          @click="onSearchPage"
        />
        <svg-icon
          :title="$t('语言切换')"
          class="svg-active intro-box"
          data-step="3"
          data-intro="国际化"
          :icon="lang == 'zh-CN' ? 'icon-lang' : 'icon-lang-en'"
          @click="onLang"
        />

        <svg-icon
          :title="$t('全屏')"
          class="svg-active intro-box"
          data-step="4"
          data-intro="全屏"
          icon="icon-screen"
          @click="onScreen"
        />

        <dx-dropdown :height="244">
          <el-badge :value="200" is-dot :max="99" class="active-operation-item">
            <div class="active-operation">
              <svg-icon
                slot="title"
                :title="$t('消息')"
                class="intro-box svg-message"
                data-step="5"
                data-intro="消息"
                icon="icon-message"
                @click="onMessage"
              />
            </div>
          </el-badge>
          <template slot="content">
            <Messages />
          </template>
        </dx-dropdown>

        <svg-icon
          :title="$t('设置')"
          class="svg-active intro-box"
          data-step="6"
          data-intro="设置"
          icon="icon-setting"
          @click="onSetting"
        />

        <div
          id="user-info"
          class="user-avatar intro-box"
          data-step="7"
          data-intro="用户信息"
        >
          <el-avatar
            size="small"
            src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
          ></el-avatar>
          <span class="user-name">{{ $t("系统管理员") }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import Messages from "./components/Messages.vue";
export default {
  inject: ["reload"],
  components: {
    Messages,
  },
  computed: {
    ...mapGetters(["sidebar_width", "isCollapse", "isFullScreen", "lang"]),
  },
  mounted() {
    this.$nextTick((_) => {
      this.recordLoginTime();
    });
  },
  methods: {
    recordLoginTime() {
      var firstDate = localStorage.getItem("firstDate");
      // 获取当前时间（年月日）
      var now = new Date().toLocaleDateString();
      // 转换成时间戳
      var time = Date.parse(new Date(now));
      if (localStorage.getItem("firstDate")) {
        if (time > firstDate) {
          localStorage.setItem("firstDate", JSON.stringify(time));
        }
      } else {
        console.log("今天第一次开启");
        localStorage.setItem("firstDate", JSON.stringify(time));
        this.guide();
      }
    },
    guide() {
      let steps = [
        {
          element: ".intro-box[data-step='1']",
          intro: "折叠菜单",
          position: "right",
        },
        {
          element: ".intro-box[data-step='2']",
          intro: "页面搜索",
        },
        {
          element: ".intro-box[data-step='3']",
          intro: "切换系统语言",
        },
        {
          element: ".intro-box[data-step='4']",
          intro: "开启全屏",
        },
        {
          element: ".intro-box[data-step='5']",
          intro: "消息",
        },
        {
          element: ".intro-box[data-step='6']",
          intro: "系统设置",
        },
        {
          element: document.querySelector("#user-info"),
          intro: "用户信息",
        },
        {
          element: document.querySelector("#menu-container"),
          intro: "系统菜单",
        },
        {
          element: document.querySelector("#breadcrumb-container"),
          intro: "面包屑",
        },
        {
          element: document.querySelector("#page-container"),
          intro: "内容区",
        },
      ];
      let introJsOptions = {
        showButtons: true, // 显示按钮
        showStepNumbers: false, // 显示步骤数字
        showProgress: false, // 显示进度
        overlayOpacity: 0.5, // 遮罩透明度
        positionPrecedence: ["bottom", "right", "left", "top"], // 显示位置优先级
        tooltipClass: "introjs-tooltip", // 提示框样式
        tooltipPosition: "bottom", // 提示框位置
        highlight: true, // 高亮
        exitOnEsc: true, // 按Esc键退出
        exitOnOverlayClick: false, // 点击遮罩层退出
        nextLabel: "下一步", // 下一步按钮文本
        prevLabel: "上一步", // 上一步按钮文本
        doneLabel: "完成", // 完成按钮文本
        hidePrev: false, // 隐藏上一步按钮
        hideNext: false, // 隐藏下一步按钮
        disableInteraction: false, // 禁用交互
        disablePrev: false, // 禁用上一步按钮
        disableNext: false, // 禁用下一步按钮
        disableHide: false, // 禁用隐藏按钮
        disableOverlay: false, // 禁用遮罩
        disableScroll: false, // 禁用滚动
        disableKeyboardNavigation: false, // 禁用键盘导航
        disableHotkeys: false, // 禁用热键
        disableAutoPosition: false, // 禁用自动定位
        disableInteractionOnElement: false, // 禁用交互元素
        disableInteractionOnSelector: false, // 禁用交互选择器
        disableInteractionOnClass: false, // 禁用交互类名
        disableInteractionOnId: false, // 禁用交互ID
        disableInteractionOnTag: false, // 禁用交互标签
        disableInteractionOnAttribute: false, // 禁用交互属性
        disableInteractionOnValue: false, // 禁用交互值
        steps,
      };
      this.$introJs().setOptions(introJsOptions).start();
    },
    onSearchPage() {
      this.$store.dispatch("settings/setSearchShow");
    },
    onCollapse() {
      this.$store.dispatch("app/setCollapse", !this.isCollapse);
    },
    onScreen() {
      this.$store.dispatch("app/setFullScreen", !this.isFullScreen);
    },
    onMessage() {},
    // 语言
    onLang() {
      if (this.lang === "zh-CN") {
        this.$store.dispatch("app/setLang", "en-US");
        this.$i18n.locale = "en-US";
      } else {
        this.$store.dispatch("app/setLang", "zh-CN");
        this.$i18n.locale = "zh-CN";
      }
    },
    onSetting() {
      this.$emit("onSetting");
    },
  },
};
</script>

<style lang="scss" scoped>
$titleWidth: 188px;
.header-container {
  width: 100%;
  height: 100%;
  color: var(--herder-color);
  display: flex;
  justify-content: space-between;
  align-items: center;

  .header-left {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    // margin-left: 6px;

    .logo {
      width: 100%;
      margin-left: 6px;
      display: flex;
      justify-content: center;
      align-items: center;

      .logo-url {
        width: 46px;
        height: 46px;
        filter: grayscale(0.3);
        background-image: url("@/assets/logo.png");
        background-size: contain;
        background-repeat: no-repeat;

        &:hover {
          filter: grayscale(0);
        }
      }
    }

    .title {
      width: $titleWidth;
      text-align: center;
      font-size: 20px;
      animation: slidein;
      animation-duration: 1s;

      .title-text {
        width: 100%;
      }
    }

    @keyframes slidein {
      from {
        margin-left: -100%;
        opacity: 0;
      }

      to {
        margin-left: 0%;
        opacity: 1;
      }
    }
  }

  .header-right {
    flex: 1;
    height: 100%;
    padding: 0px 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .menu-collapse {
      width: 40px;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }

    .active-operation {
      flex: 1;
      height: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .active-operation-item {
        height: 100%;
        margin: 0px 10px;
        display: flex;
        justify-content: center;
      }

      .active-operation {
        height: 100%;
        display: flex;
        justify-content: center;
      }

      .user-avatar {
        height: 32px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-left: 16px;
        cursor: pointer;

        .user-name {
          width: 86px;
          margin-left: 6px;
          font-size: 14px;
          &:hover {
            color: var(--main-hover);
          }
        }
      }
    }

    .svg-icon {
      font-size: 24px;
      transition: all 0.3s ease-in-out;
      color: var(--herder-color);
      cursor: pointer;

      &:hover {
        color: var(--main-hover);
      }
    }

    .svg-message {
      font-size: 18px;
      cursor: pointer;
    }

    .svg-active {
      font-size: 18px;
      cursor: pointer;
      margin: 0 10px;

      &:hover {
        color: var(--main-hover);
      }
    }
  }
}
</style>